import React, {useEffect, useState} from "react";
import {Card, Table, Space, Button, Dropdown, Tag} from "antd";

import {UserApi} from '@/api/index'
import AddUserModal from './components/add'
import EditUserModal from './components/edit'
import "./list.less"

export default ()=> {

    const [list, setList] = useState([])
    const [total, setTotal] = useState(0)
    const [pageSize, setPageSize] = useState(20)
    const [page, setPage] = useState(0)
    const [isModalVisible, setIsModalVisible] = useState(false)
    const [isEditModalVisible, setIsEditModalVisible] = useState(false)
    const [currentUserId, setCurrentUserId] = useState(null)

    useEffect(() => {
        getUserList()
    },[page,pageSize])

    const getUserList = async () => {
        let params = {
            page: page,
            pageSize: pageSize,
        }
        let ret = await UserApi.list(params);
        if (ret && ret.code === 200) {
            setList(ret.data.content || [])
            setTotal(ret.data.totalElements)
        }
    }

    const showModal = () => {
        setIsModalVisible(true)
    }

    const handleModalCancel = () => {
        setIsModalVisible(false)
    }

    const handleModalSuccess = () => {
        setIsModalVisible(false)
        getUserList() // 刷新列表
    }

    const showEditModal = (record) => {
        setCurrentUserId(record.id)
        setIsEditModalVisible(true)
    }

    const handleEditModalCancel = () => {
        setIsEditModalVisible(false)
        setCurrentUserId(null)
    }

    const handleEditModalSuccess = () => {
        setIsEditModalVisible(false)
        setCurrentUserId(null)
        getUserList() // 刷新列表
    }

    const getDropdownItems = (record) => [
        {
            key: '1',
            label: '编辑',
            onClick: () => showEditModal(record)
        },
        {
            key: '2',
            label: '重置密码',
        },
        {
            key: '3',
            label: '删除',
        },
    ];

    const columns = [
        {
            title: '用户名',
            dataIndex: 'username',
            key: 'username',
        },
        {
            title: '姓名',
            dataIndex: 'realName',
            key: 'realName',
        },
        {
            title: '邮箱',
            dataIndex: 'email',
            key: 'email',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: (text, record) => (
                <Tag color={text === 1 ? 'green' : 'red'}>
                    {text === 1 ? '正常' : '禁用'}
                </Tag>
            )
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '操作',
            dataIndex: 'action',
            width: 200,
            key: 'action',
            render: (text, record) => (
                <Space size="small">
                    <Button type="link" size="small" onClick={() => showEditModal(record)}>编辑</Button>
                    <Button type="link" size="small">启用</Button>
                    <Button type="link" size="small" danger>禁用</Button>
                    <Dropdown.Button className="more" type="link" menu={{ items: getDropdownItems(record)}}>更多</Dropdown.Button>
                </Space>
            )
        },
    ];

    const pagination = {
        onChange: (page, pageSize) => {
            setPageSize(pageSize)
            setPage(page - 1)
        },
        pageSize: pageSize,
        total: total
    }

    return (
        <Card title="用户列表" extra={<Button type="primary" onClick={showModal}>新增用户</Button>}>
            <Table columns={columns} dataSource={list} pagination={pagination}/>
            
            <AddUserModal 
                visible={isModalVisible}
                onCancel={handleModalCancel}
                onSuccess={handleModalSuccess}
            />
            
            <EditUserModal 
                visible={isEditModalVisible}
                onCancel={handleEditModalCancel}
                onSuccess={handleEditModalSuccess}
                userId={currentUserId}
            />
        </Card>
    )
} 